<template>
    <div>
        <div style="margin-bottom:5px">
            <el-button @click="getLogs" size="mini">刷新</el-button>
            <el-popconfirm title="确认要删除？" @confirm="clearAll" class="mg-left-10">
                <el-button slot="reference" type="danger" size="mini">删除该任务所有日志</el-button>
            </el-popconfirm>
        </div>
        <el-table size="small" :data="logs" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中"
        style="width: 100%;">
        <el-table-column
            type="index"
            width="50">
        </el-table-column>
        <el-table-column sortable prop="success" label="执行结果" width="100">
            <template slot-scope="scope">
                {{scope.row.success?'成功':'失败'}}
            </template>
        </el-table-column>
        <el-table-column sortable prop="content" label="错误信息">
        </el-table-column>
        <el-table-column sortable prop="logAt" label="执行时间" width="200">
            <template slot-scope="scope">
            <div>{{scope.row.logAt|timestampToTime}}</div>
            </template>
        </el-table-column>
        </el-table>
        <Pagination :data="query" @onPageChange="getLogs" @onSizeChange="getLogs"></Pagination>
    </div>
</template>
<script>
import Pagination from '@/components/Pagination.vue'
import {TaskLogsList,TaskLogsClear} from '@/api/ruleApi.js'
export default {
    name: 'TaskLogs',
    props:{
        taskId:{
            type: String,
            default(){
                return '';
            }
        }
    },
    data(){
        return {
            loading:false,
            query: {
                taskId: this.taskId,
                page: 1,
                size: 10,
                total: 0
            },
            logs: [],
        }
    },
    components:{
        Pagination
    },
    created(){
        this.getLogs();
    },
    watch:{
        taskId(val){
            this.query.taskId=val;
            this.getLogs();
        }
    },
    methods:{
      getLogs(){
        this.loading=true;
        TaskLogsList(this.query).then(res=>{
            this.query.total=res.total;
            this.logs=res.data;
            this.loading=false;
        });
      },
      clearAll(){
          TaskLogsClear(this.taskId).then(()=>{
              this.getLogs();
          })
      }
    }
}
</script>